let maxDistance = 10;
        let minDistance = 5;
        let categories = [

        ];
        function openGraphData() {
            let iForUpload = document.getElementById("i-for-upload");
            iForUpload.value = null;
            iForUpload.onchange = function () {
                let configFile = iForUpload.files[0];
                let fileReader = new FileReader();
                fileReader.addEventListener('load', function (fileLoadedEvent) {
                    let textConfig = fileLoadedEvent.target.result
                    let lines = textConfig.split("\n");
                    lines.shift(1);
                    let edges = lines.map(function (line) {
                        let items = line.split(",");
                        return createEdge(items[0], items[1], items[2]);
                    })

                    var maxWeight = 0;
                    let nodeIds = new Set();
                    edges.forEach(edge => {
                        nodeIds.add(edge.source);
                        nodeIds.add(edge.target);

                        let weight = edge.weight;
                        if (weight != null) {
                            maxWeight = Math.max(maxWeight, weight);
                        } else {
                            weight = 1;
                        }
                    });
                    let minX = Math.pow(10, minDistance - maxDistance);
                    let scalaRatio = (1 - minX) / (maxWeight - 1);
                    edges.forEach(edge => {
                        let v = (edge.weight - 1) * scalaRatio + minX;
                        edge.value = minDistance + Math.log10(v);
                    });
                    let nodes = Array.from(nodeIds)
                        .map(name => {
                            return {
                                name: name,
                                id: name
                            };
                        });
                    let option = createOption(nodes, edges);

                    myChart.setOption(option);
                });

                fileReader.readAsText(configFile, 'UTF-8');
            };
            iForUpload.click();
        }
        function checkEntry(event, action) {
            if (event.keyCode == 13) {
                action();
            }
        }
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);

        linkTypeInfo = {
            symbol: ['none', 'arrow'],
            lineStyle: {
                type: 'solid'
            }
        };

        lastOption = null;
        function refreshHighLightNodes() {
            if (lastOption == null) {
                refreshNodes();
                return;
            }
            var highLightTexts = readTexts(highLightContent);
            lastOption.series[0].data.forEach(node => {
                configHighLight(node, highLightTexts)
            });
            myChart.setOption(lastOption);
        }

        function configHighLight(node, hightLightTexts) {
            if (hightLightTexts != null && hightLightTexts.length > 0 && matchAny(node.id, hightLightTexts)) {
                node.symbolSize = 20;
            } else {
                node.symbolSize = 10;
            }
        }

        function matchAny(value, target) {
            for (index = 0; index < target.length; index++) {
                v = target[index];
                if (value.indexOf(v) >= 0) {
                    return true;
                }
            }
            return false;
        }

        function strMatch(value, includes, excludes) {
            return (includes.length == 0
                || matchAny(value, includes))
                && (excludes.length == 0
                    || !matchAny(value, excludes));
        }

        function readTexts(ctrl) {
            return ctrl.value
                // .replaceAll('.', '/')
                .split(";")
                .filter(a => a != "");
        }

        function shortCode(code) {
            let endIndex = code.indexOf('.(');
            if (endIndex < 0) {
                return code;
            }
            let startIndex = code.lastIndexOf(".", endIndex - 1);
            startIndex = code.lastIndexOf(".", startIndex - 1);
            return code.substring(startIndex + 1, endIndex);
        }

        function collectNodes(businessDatas) {
            let nodes = new Set();
            Object.keys(businessDatas)
                .forEach(key => {
                    let keys = key.split("-");
                    nodes.add(keys[0]);
                    nodes.add(keys[1]);
                });
            return Array.from(nodes)
                .map(name => {
                    return {
                        name: name,
                        id: name
                    };
                });
        }

        function createEdge(from, to, weight) {
            return {
                source: from,
                target: to,
                weight: weight,
                symbol: linkTypeInfo.symbol,
                lineStyle: linkTypeInfo.lineStyle
            }
        }

        function refreshNodes() {
            myChart.showLoading();

            // nodeMap = new Map();
            var includeTexts = readTexts(includeContent);
            var excludeTexts = readTexts(excludeContent);
            var highLightTexts = readTexts(highLightContent);
            let nodes = collectNodes(businessDatas);
            let edges = collectEdges(businessDatas);

            graphData = nodes;
            // .filter(function (node) {
            //     return strMatch(node.id, includeTexts, excludeTexts);
            // });
            // graphData.forEach(node => {
            //     configHighLight(node, highLightTexts)
            // });

            graphLinks = edges;
            // .filter(function (edge) {
            //     return strMatch(edge.source, includeTexts, excludeTexts)
            //         && strMatch(edge.target, includeTexts, excludeTexts);
            // });
            option = createOption(graphData, graphLinks);

            myChart.setOption(option);
            myChart.hideLoading();
            lastOption = option;
        }

        function createOption(graphData, graphLinks) {
            return {
                tooltip: {
                    show: true,
                    trigger: 'item',
                    enterable: true,
                    formatter: function (params, ticket, callback) {
                        var data = params.data;
                        if (data.id != null) {
                            return data.id.replaceAll('/', '.');
                        }
                        return 'Source:' + data.source.replaceAll('/', '.')
                            + '<br>Type:' + data.type
                            + '<br>Target:' + data.target.replaceAll('/', '.');
                    }
                },
                legend: {
                    data: ['Other']
                },
                series: [{
                    type: 'graph',
                    layout: 'force',
                    animation: false,
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    },
                    draggable: true,
                    data: graphData,
                    categories: categories,
                    force: {
                        edgeLength: 100,
                        repulsion: 400,
                        gravity: 0.1
                    },
                    roam: true,
                    edgeSymbol: ['none', 'arrow'],
                    links: graphLinks
                }]
            };
        }